<template>
  <div class="host">
    <Conten
      title="主机列表"
      class="left"
    >
      <template slot="content">
        <HostList
          treePlaceholder="搜索主机"
          @list-node-click="handleNodeClick"
          :list="list"
          :checkDefault="checkDefault"
          :defaultProps="defaultProps"
        ></HostList>
      </template>
    </Conten>

    <div class="right">
      <div class="right-top">
        <Conten
          class="right-topleft"
          title="主机状态"
        >
          <template slot="content">
            <HostStatus :statusData="statusData" />
          </template>
        </Conten>
        <Conten
          class="right-topright"
          title="进程详情"
        >
          <template slot="content">
            <ProgressDetail :progressDetailData="progressDetailData"></ProgressDetail>
          </template>
        </Conten>
      </div>

      <div class="right-middle">
        <Conten
          class="right-middleleft"
          title="网络带宽"
        >
          <template slot="content">
            <chartView
              height="100%"
              width="100%"
            ></chartView>
          </template>
        </Conten>
        <Conten
          class="right-middleright"
          title="实时负载"
        ></Conten>
      </div>

      <div class="right-bottom">
        <Conten
          class="right-bottomleft"
          title="网络带宽"
        ></Conten>
        <Conten
          class="right-bottomright"
          title="实时负载"
        ></Conten>
      </div>
    </div>
  </div>
</template>

<script>
import chartView from "@/components/charts/index.vue";
import { getLineOpt } from "@/components/charts/baseOptions/index.js";
import Conten from "./Conten.vue";
import HostStatus from "./HostStatus.vue";
import HostList from "@/components/HostList/index.vue";
import ProgressDetail from "./ProgressDetail.vue";
import websocketMixin from "@/mixin/websocketMixin.js";
import {
  getAllHsot,
  getHostCpu,
  getHostMemory,
  getHostDisk,
  getHostSpeed,
  getHostPayLoad,
  getHostTop,
  findHostInfo,
} from "@/api/host.js";
import { Message } from "element-ui";

export default {
  components: {
    Conten,
    HostList,
    HostStatus,
    ProgressDetail,
    chartView,
  },
  mixins: [websocketMixin],
  data() {
    return {
      list: [], //ip列表
      checkDefault: [], //ip列表
      defaultProps: {
        children: "children",
        label: "ip",
      },
      statusData: {}, //主机状态
      currentIp: "",
      progressDetailData: {}, //进程详情
    };
  },
  created() {
    this.getAllHsot();
  },
  methods: {
    /**
     * 根据ip切换socket监听事件
     */
    switchSocket(ip) {
      // 先卸载所有ip事件，再开启
      // this.socket.removeAllListeners();
      console.log("this.socket", this.socket);
      this.socket.on(`event_${ip}`, (res) => {
        // console.log('res', res);
        // this.socketDataList.forEach(el => {
        //   this[`${el}Data`].length != 0 ? this[`${el}Data`].shift() : ''
        //   this[`${el}Data`].push(res)
        //   this.setOptionsData(this[`${el}Data`], `${el}Opt`)
        // })
        // this.progressDetailData.list = res ? res.top.list : []
        this.statusData = res;
        this.statusData.ip = ip;
      });
    },

    handleNodeClick({ data, node, instance }) {
      this.currentIp = data.ip;
      // 此处是根据主机 请求 监听不同事件
      Promise.all([
        this.getAllHsot(),
        this.getHostTop(data.ip),
        this.findHostInfo(data.ip),
      ])
        .then((res) => {
          // this.switchSocket(data.ip);
        })
        // 个别接口报错不要影响其他接口调用socket
        .catch((err) => {
          // this.switchSocket(data.ip);
        });
    },
    //获取主机列表
    async getAllHsot() {
      try {
        const res = await getAllHsot();
        this.list = res.data;
        this.checkDefault = [this.list[0].ip];
      } catch (error) {
        Message.error("获取主机列表错误");
      }
    },

    // 获取进程详情
    getHostTop(ip) {
      return getHostTop(ip).then((res) => {
        this.progressDetailData = res.data;
      });
    },

    // 获取主机状态
    findHostInfo(ip) {
      return findHostInfo(ip).then((res) => {
        this.statusData = res.data;
        this.statusData.ip = ip;
      });
    },

    //获取cpu详情
    // async getHostCpu(ip) {},
  },
  mounted() {},
};
</script>

<style lang="less" scoped>
.host {
  display: flex;
  width: 100%;
  // height: 860px;
}
.left {
  width: 17%;
  height: 944px;
  border: 1px solid red;
  margin-right: 10px;
  .content {
    display: flex;
    width: 100%;
    // padding-bottom: 50px;
    padding-bottom: 16px;
  }
}
.right {
  display: flex;
  flex-direction: column;
  width: 79%;
  border: 1px solid red;
  &-top {
    display: flex;
    flex: 1;
    margin-right: 10px;
    .right-topleft {
      width: 40%;
      margin-right: 10px;
    }
  }
  &-middle {
    display: flex;
    flex: 1;
    margin-right: 10px;
    .right-middleleft {
      width: 40%;
      margin-right: 10px;
    }
  }
  &-bottom {
    display: flex;
    flex: 1;
    margin-right: 10px;
    .right-bottomleft {
      width: 40%;
      margin-right: 10px;
    }
  }
}
</style>>